// Switch

@import '../../style/themes/default';
@import '../../style/mixins/index';
@import './param';

@mixin switch {
  width: 100%;
  @include flex();
  > label {
    display: inline-block;
    white-space: nowrap;
    height: $--x-switch-height;
    line-height: $--x-switch-height;
    position: relative;
    color: $--x-text-300;
    font-weight: 600;
    @include text-align();
  }
  &-row {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    height: $--x-switch-height;
    line-height: $--x-switch-height;
  }
  &-slider {
    position: relative;
    margin: calc(calc(#{$--x-switch-height} - #{$--x-switch-slider-height}) / 2) 0;
    display: inline-flex;
    align-items: center;
    position: relative;
    width: $--x-switch-slider-height * 2;
    height: $--x-switch-slider-height;
    border: $--x-border-width solid $--x-info;
    border-radius: $--x-switch-slider-height;
    background-color: $--x-info;
    cursor: pointer;
    transition: border-color 0.3s, background-color 0.3s;
    &::after {
      position: absolute;
      box-shadow: 0 calc(#{$--x-border-width} * 2) calc(#{$--x-border-width} * 4) 0 rgba(0, 35, 11, 0.2);
      width: calc(#{$--x-switch-slider-height} - calc(#{$--x-border-width} * 4));
      height: calc(#{$--x-switch-slider-height} - calc(#{$--x-border-width} * 4));
      margin: 0 calc(#{$--x-border-width} * 2);
      background-color: $--x-background-a100;
      border-radius: calc(#{$--x-switch-slider-height} - calc(#{$--x-border-width} * 4));
      cursor: pointer;
      left: 0;
      transition: all 0.36s cubic-bezier(0.78, 0.14, 0.15, 0.86);
      content: ' ';
    }
  }
  &.x-checked {
    .#{$--x-switch-prefix}-slider {
      background-color: $--x-primary;
      border-color: $--x-primary;
      &::after {
        left: calc(#{$--x-switch-slider-height} - calc(#{$--x-border-width} * 2));
      }
    }
  }
  &.x-required {
    > label {
      color: $--x-danger;
    }
  }
  &.x-disabled {
    .#{$--x-switch-prefix}-slider {
      cursor: not-allowed;
      background-color: $--x-info-500;
      border-color: $--x-info-500;
    }
    &.x-checked {
      .#{$--x-switch-prefix}-slider {
        background-color: $--x-primary-500;
        border-color: $--x-primary-500;
      }
    }
  }
  &.x-direction {
    &-row {
      > label {
        padding: 0 0.5rem 0 0;
      }
    }
    &-row-reverse {
      > label {
        padding: 0 0 0 0.5rem;
      }
    }
    &-column {
      align-items: inherit;
    }
    &-column-reverse {
      align-items: inherit;
    }
  }
}
